<template>
  <scroll-view
    class="indexView"
    :scroll-y="true"
    :lower-threshold="100"
    :enable-back-to-top="true"
    :enable-flex="true"
    @scrolltolower="onScrolltolower"
  >
    <NavigationBar @inputClick="inputClick"></NavigationBar>
    <view class="scrollView">
      <IndexTabs></IndexTabs>
      <IndexSearch></IndexSearch>
      <IndexList ref="IndexListRef"></IndexList>
      <uv-gap height="50rpx"></uv-gap>
    </view>
  </scroll-view>
</template>

<script setup>
import { changeTabbar } from "/utils/tabBar.js";
import NavigationBar from "/components/NavigationBar/index.vue";
import IndexTabs from "/components/IndexTabs/index.vue";
import IndexSearch from "/components/IndexSearch/index.vue";
import IndexList from "/components/IndexList/index.vue";
import { ref, getCurrentInstance, provide } from "vue";
import { useStore } from "vuex";
import QQMapWX from "/utils/qqmap-wx-jssdk.js";

import articleManagement from "/api/articleManagement.js";

const { proxy } = getCurrentInstance();
const qqmapsdk = new QQMapWX({
  key: proxy.env.qqMapSdkKey,
});
provide("qqmapsdk", qqmapsdk);

const store = useStore();

changeTabbar(0);
const IndexLIstData = ref([]);
const IndexListRef = ref(null);
const onScrolltolower = () => {
  IndexListRef.value.onReachBottom();
};

const getList = () => {
  articleManagement.gteArticleListToIndex().then((res) => {
    console.log("list", res);

    IndexLIstData.value = res.data;
  });
};

getList();

store.dispatch("position/getPosition", {
  reverseGeocoder: true,
  settingTitle: "请求授权当前位置",
  settingContent: "需要获取您的地理位置，可以更准确给您推荐附近的帖子！",
});

const inputClick = () => {
  uni.navigateTo({
    url: "/pages/index/search",
  });
};
</script>

<style lang="scss">
page {
  height: 100vh;
  padding-bottom: calc(96rpx + env(safe-area-inset-bottom));
}

.indexView {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.scrollView {
  flex: 1;
}
</style>
